<template>
    <div class="app-container">
        <!--  搜索栏  -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入完整用户名" clearable size="small"/>
            </el-form-item>
            <el-form-item label="工号" prop="userCode">
                <el-input v-model="queryParams.userCode" placeholder="请输入完整工号" clearable size="small"/>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
<!--         listAccount     handleQuery  -->
                <el-button type="primary" icon="el-icon-search" size="mini"  @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;"  @click="resetQuery" >重置</el-button>
            </el-form-item>
        </el-form>
<!--     页面操作   -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini"
                        @click="handleAccount"
                >新增账号</el-button>
            </el-col>
        </el-row>
<!-- 表格列表 .slice((currentPage-1)*pageSize,currentPage*pageSize) max-height="390" -->
        <el-table v-loading="accountLoading" :data="accountList.slice((currentPage-1)*pageSize,currentPage*pageSize)" >
            <el-table-column label="序号" align="center" type="index" :show-overflow-tooltip="false"/>
            <el-table-column label="用户名" align="center" prop="userName"/>
            <el-table-column label="工号" align="center" prop="userCode"/>
<!--          单条记录操作  -->
            <el-table-column label="操作" align="center" class-name="small-padding" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleRole(scope.row)">角色分配</el-button>
                    <el-button size="mini" type="text" icon="el-icon-setting" @click="handleResetPwd(scope.row)">重置密码</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="onDelete(scope.row.id)">注销</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--<pagination
                v-show="total>0"
                :total="total"
                :page.sync="pageParams.page"
                :limit.sync="pageParams.rows"
                @pagination="listAccount"
        />-->
        <pagination v-show="accountList.length>0"
                :total="accountList.length"
                :page.sync="currentPage"
                :limit.sync="pageSize"
        />

        <!-- 角色分配 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="45%" append-to-body>
            <role-form :roleData="roleData" :nowrole="nowrole" :userCode="userCode" @submitForm="listAccount" @cancelDialog="cancel"></role-form>
        </el-dialog>
        <!-- 新增账号 -->
        <el-dialog :title="title" :visible.sync="accountOpen" v-if="accountOpen" width="60%" append-to-body>
            <user-form :userList="showEmployeeList" :accountList="accountList" :userCode="userCode" @submitForm="listAccount" @refresh="refresh" @cancelDialog="cancel"></user-form>
        </el-dialog>
    </div>
</template>

<script>
    import {delAccount, getAllAccount, getAccountPage, userFuzzyQueryAuth} from '@/api/platform/account';
    import {getallrole} from '@/api/platform/role';
    import roleForm from "./form/roleForm";
    import userForm from "./form/userForm";
    import {resetPassword} from '@/api/user';
    import {getEmployee} from '@/api/basicdata/employee';
    // import Role from "@/views/system/role/index";
    export default {
        name: "index",
        components: {
            roleForm,
            userForm
        },
        data() {
            return {
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                // 总条数
                total: 0,
                // 查询参数
                queryParams: {
                    userName: undefined,
                    userCode: undefined,
                },
                // 账号表格数据
                accountList: [],
                // 用户信息
                employeeList: [],
                showEmployeeList: [],
                // 账号
                userCode: '',
                // 角色列表
                roleData: [],
                // 账号已有角色
                nowrole: [],
                // 分页
                currentPage: 1,
                currentIndex: '',
                pageSize: 10,
                // 弹出层标题
                title: "",
                // 是否弹出层
                open: false,
                accountOpen: false,
                // 账号加载效果
                accountLoading: false,
            }
        },
        created() {
            // 初始化账号列表
            this.listAccount();
            // 初始化角色列表
            this.getRoledata();
            //初始化用户列表
            this.listEmployee();
        },
        methods: {
            /** 获取账号列表 */
            listAccount() {
                /*this.accountLoading = true;
                getAccountPage({
                    'pageParameter': this.pageParams,
                    'searchParams': this.queryParams
                }).then(res => {
                    this.accountList = res.responseBody.result;
                    this.total = res.responseBody.pageParameter.totalCount;
                }).catch(err => {
                }).finally(() => {
                    this.accountLoading = false
                })*/
                this.accountLoading = true
                getAllAccount({ 'searchParams': {}}).then(res => {
                    this.accountLoading = false
                    // console.log(res)
                    this.accountList = res.responseBody
                    // console.log("账号数量==="+res.responseBody.length)
                }).catch(err => {
                    // console.log(err)
                    this.accountLoading = false
                })
            },

            /** 获取用户列表 */
            listEmployee(data = {}) {
                const searchParams = {
                    searchParams: data
                }
                getEmployee(searchParams).then(res => {
                    if (res.retCode === '200') {
                        this.employeeList = res.responseBody
                        this.showEmployeeList = res.responseBody
                    } else {
                        console.log(res)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },

            /** 获取角色列表 */
            getRoledata() {
                getallrole({ 'searchParams': {
                        'id': ''
                    }}).then(res => {
                    this.roleData = res.responseBody
                })
            },

            /** 新增账户按钮操作 */
            handleAccount() {
                this.accountOpen = true;
                this.title = "新增账号";
            },

            /** 角色配置按钮操作 */
            handleRole(row) {
                this.open = true;
                this.title = "角色配置";
                // 账号
                this.userCode = row.userCode;
                // 账号已有角色
                this.nowrole = row.aRoleNameCodeDTO;
            },

            /** 重置密码按钮操作 */
            handleResetPwd(row) {
                this.$confirm('确定重置此账户的密码?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    const reqdata = {
                        id: row.id,
                        userCode: row.userCode,
                        password: 'ufkj.123'
                    }
                    return resetPassword(reqdata);
                }).then(() => {
                    this.msgSuccess("重置成功！");
                })
            },

            /** 注销账户按钮操作 */
            onDelete(id) {
                this.$confirm('确定注销此账户吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return delAccount(id);
                }).then(res => {
                    if (res.retCode === '200') {
                        this.$message.success('注销成功！')
                        this.listAccount()
                    } else {
                        this.$message.error('注销失败！  错误号：' + res.retCode)
                        this.listAccount()
                        // console.log(res)
                    }
                })
            },

            /** 搜索按钮操作 */
            handleQuery() {
                if (this.queryParams.userName === undefined && this.queryParams.userCode === undefined) { // queryParams
                    this.listAccount()
                } else {
                    userFuzzyQueryAuth(this.queryParams).then(res => {
                        // console.log(res)
                        if (res.retCode === '200') {
                            if (res.responseBody) {
                                this.accountList = res.responseBody
                            } else {
                                this.accountList = []
                            }
                        } else {
                            console.log(res)
                        }
                    })
                }
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.accountOpen = false;
            },

            // 重置
            refresh() {
                this.listAccount()
                this.listEmployee()
                this.getRoledata()
            }
        }
    }
</script>

<style scoped>
    /*dialog-footer 内边距*/
    /*/deep/ .el-dialog__body {
        padding: 10px 15px 0px 15px;
    }*/
</style>
